<template>
	<view class="content">
		<view class="top">
			<view class="list">
				<text>视频标题</text>
				<input type="text" value="" placeholder="输入视频标题" maxlength="50" v-model="titles" adjust-position="false"/>
			</view>
			<!-- 	<view class="list">
				<text>选择分类</text>
				<lauwen-select :options="options" :defaultIndex="'请选择'" :height="45" :padding="15" :fontSize="'1rem'" @getValue="getValue"></lauwen-select>
				<text style="color: #999999;padding-right: 30upx;">招聘会</text>
			</view> -->
			<view class="lists">
				<text>视频简介</text>
				<textarea value="" placeholder="请输入视频简介" maxlength="50" v-model="describe"
					style="background-color: #F5F5F5;width: 690upx;height: 200upx;border-radius: 15upx;padding-left: 15upx;margin-top: 15upx;" adjust-position="false"/>
				<view
					style="display: flex;width: 100%;align-items: center;justify-content: space-between;flex-wrap: wrap;">
					<view style="display: flex;align-items: center;margin-top: 15upx;flex-wrap: wrap;">
						<text class="huati" @click="addht" v-if="ht.length==0">#添加话题</text>
						<text class="huati" @click="addht" v-else v-for="item,index in ht"
							style="margin-left: 10upx;">#{{item}}
							<image src="../../../static/zhanhui/close.png" mode=""
								style="width: 30upx;height: 30upx;position: relative;top: -10upx;"
								@click="shanchu(index,item)"></image>
						</text>
					</view>
					<text style="padding-top: 10upx;">{{describe.length}}/50</text>
					
				</view>
				
				
				<!-- 				<view class="htlist" v-show="ishuati">
					<image src="../../../static/zhanhui/close.png" mode="" style="width: 60upx;height: 60upx;position: absolute;right: 60upx;" @click="ishuati = false"></image>
					<scroll-view scroll-y="true" style="width: 100%;height: 848upx;">
						<view class="listq">
							<text v-for="item in huatilist" @click="addti(item)">#{{item.cate_name}}</text>
						</view>
					</scroll-view>
				</view> -->
				<scroll-view scroll-y="true" style="width: 100%;height: 848upx;" class="htlist" v-if="ishuati">
					<image src="../../../static/zhanhui/close.png" mode=""
						style="width: 60upx;height: 60upx;position: fixed;right: 60upx;" @click="ishuati = false">
					</image>
					<view class="listq">
						<text v-for="item in huatilist" @click="addti(item)">#{{item.cate_name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="shipin">
				<text style="padding-top: 20upx;display: inline-block;padding-left: 30upx;color: #333;">添加视频</text>
			
				<view class="photo" style="padding-left: 16upx;">
					<!-- 		  <easy-upload
					        :dataList="dataList" 
					        uploadUrl="https://dsx.cdzer.com//merchants/Video/uploadVideo" 
					        deleteUrl='http://localhost:8080//upload' 
					        :types="types"
					        @successImage="successImage" 
					        @successVideo="successvideo"
							:upload_max="max"
							:uploadCount="nums"
					    /> -->
					<htz-image-upload :max="1" v-model="ceshiData" :uploadSuccess="zidingyiSuccess" name="video_data"
						mediaType="video" action="https://dsx.cdzer.com//api/Video/uploadVideo" @imgDelete="delshipin">
					</htz-image-upload>
					<progress :percent="jindu" show-info stroke-width="3" />
				</view>
			</view>
		</view>
		<view class="nav">
			<text style="padding-top: 20upx;display: inline-block;padding-left: 30upx;color: #666;">上传视频封面</text>
			<view class="photo">
				<uni-file-picker ref="files" :auto-upload="false" v-model="imageValue" fileMediatype="image" mode="grid"
					@select="select" @progress="progress" @success="success" @fail="fail" limit="1"
					style="margin-top: 30upx;margin-left: 30upx;" :image-styles="imageStyles" />
			</view>
		</view>

		
		<view class="bottom" style="margin-top: 30upx;">
			<view class="btn" @click="fabu" :class="titles !== '' || this.imgurl !=='' ||describe !== ''?'btn':'btns'">
				发布视频
			</view>
		</view>
	</view>
</template>
<script>
	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				text: '',
				imageValue: [],
				fenleilist: ["呵呵哒", "么么哒"],
				options: [],
				turl: '',
				shopId: '',
				titles: '',
				ishuati: '',
				dianzan: '',
				ceshiData: [],
				ht: [],
				max: 50,
				nums: 1,
				imglist: [],
				chooseImg: [],
				goodsid: '',
				src: '',
				jindu: 0,
				isShow: false,
				imageStyles: {
					width: 100,
					height: 100,

				},
				dataList: [],
				types: 'video',
				turl: '',
				tvideo: '',
				goodsinfo: {},
				describe: '',
				imgurl: '',
				spurl: '',
				cate_id: null,
				huatilist: [],
				userInfo: {},
				huatiId: [],
				type_id: null
			}
		},
		comments: {
			easyUpload
		},
		components: {
			lauwenSelect,
			htzImageUpload,
		},
		onLoad(option) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {

					this.userInfo = JSON.parse(value)
					console.log(this.userInfo, "视频信息")
					if (this.userInfo.shop_id == 0) {
						this.type_id = 1
					} else {
						this.type_id = 2
					}
				}
			} catch (e) {
				// error
			}
			uni.request({
				url: 'https://dsx.cdzer.com/api/Video/gettopicclass', //仅为示例，并非真实接口地址。
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res, "分类列表")
					this.fenleilist = res.data.data
					this.cate_id = this.fenleilist[3].id
					res.data.data.forEach(item => {
						this.options.push(item.cate_name)
					})
					// this.zlist = res.data.data
				}
			});
		},
		methods: {
			delshipin(data) {
				console.log(data, "触发删除666")
				this.spurl = ''
				this.jindu = 0
			},
			ceshiUploadSuccess(res) { //上传成功
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				***************/
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {
					this.ceshiData.push(_res.result);
				}
				/*******************************/
			},
			zidingyiSuccess(res) {
				var _res = JSON.parse(res.data);
				if (_res.status == 200) {
					this.jindu = 100
					this.spurl = _res.data.video_path
					return {
						success: true,
						url: 'https://dsx-1306280426.cos.ap-nanjing.myqcloud.com/' + _res.data.video_path
					}
				} else {
					return {
						success: false,
						url: ''
					}
				}
				console.log(_res, "上传视频")
			},
			getValue(index) {


			},
			addti(item) {

				if (this.ht.length >= 5) {
					uni.showToast({
						title: '最多添加5个话题',
						icon: 'none'
					})
				} else {
					this.ht.push(item.cate_name)
					this.huatiId.push(item.id)
				}
			},
			shanchu(index, item) {
				console.log(index, item, "删除的话题")
				this.ht.splice(index, 1)
				this.huatiId.splice(index, 1)
				console.log(this.ht, "看看闪没删掉")
			},
			addht() {
				uni.request({
					url: 'https://dsx.cdzer.com/api/video/gettopic', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						cate_id: this.cate_id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "招聘职位列表")
						if (res.data.status == 200) {
							this.huatilist = res.data.data
							this.ishuati = true
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});

			},
			selected() {


			},
			fabu() {
				// console.log(this.huatiId,this.imgurl,this.describe,this.titles)
				console.log(this.spurl,this.ceshiData, "还有啊")
				if (this.type_id == 1) {
					var uid = this.userInfo.id
				} else {
					var uid = ''
				}
				if (this.huatiId && this.imgurl !== '' && this.describe !== '' && this.titles !== '' && this.spurl !== '') {

					uni.request({
						url: 'https://dsx.cdzer.com/merchants/Video/addVideo', //仅为示例，并非真实接口地址。
						data: {
							shop_id: this.userInfo.shop_id,
							topic_ids: this.huatiId,
							title: this.titles,
							describe: this.describe,
							cover_img: this.imgurl,
							video_path: this.spurl,
							type_id: this.type_id,
							uid: uid,
							cate_id: this.cate_id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						success: (res) => {
							console.log(res, "上传视频")
							if (res.data.status == 1) {
								uni.showToast({
									title: res.data.mess,
									icon: 'none'
								})
								// this.spurl = res.data.data.video_path
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/tabBar/mydetail'
									})
								}, 1500)
							} else {

								uni.showToast({
									title: res.data.mess
								})
							}
						}
					});
				} else {
					uni.showToast({
						title: '请上传完所有信息',
						icon: 'none'
					})
				}

			},
			
			successvideo(data) {
				console.log(data, "66666666")
				this.jindu = 20
				pathToBase64(data).then(base64 => {
					this.tvideo = base64
					console.log(base64, "撒大声地")
					setTimeout(() => {
						uni.request({
							url: 'https://dsx.cdzer.com//merchants/Video/uploadVideo', //仅为示例，并非真实接口地址。
							data: {
								video_data: base64
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							method: 'POST',
							success: (res) => {
								console.log(res, "上传视频")

								if (res.data.status == 200) {
									this.jindu = 100
									this.spurl = res.data.data.video_path
									uni.showToast({
										title: res.data.mess,
									})
								} else {
									uni.showToast({
										title: res.data.mess,
										icon: 'none'
									})
								}
							}
						});
					}, 1500)
				}).catch(error => {
					console.log(error)
				})

			},
			test() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						self.src = res.tempFilePath
						console.log(res.tempFilePath)
					}
				});
			},
			select(e) {
				uni.showToast({
					title: "正常上传",
					icon: 'loading'
				})
				this.chooseImg = e.files
				// console.log('选择文件：', e.files)
				pathToBase64(e.tempFilePaths[0]).then(base64 => {
					this.turl = base64
					// console.log(this.turl,"this.turlthis.turl")
					uni.request({
						url: 'https://dsx.cdzer.com/merchants/Video/uploadImage', //仅为示例，并非真实接口地址。
						data: {
							cover_image: base64
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						success: (res) => {
							// console.log(res, "上传视频封面")
							this.imgurl = res.data.data.image_path
						}
					});
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			dropDownChange(e) {
				console.log(e, "选择了啥怎么不变")
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .lauwen-select-input {
		border: none;
	}

	.huati {
		// width: 140upx;
		padding: 10upx;
		font-size: 28upx;
		height: 40upx;
		display: flex;
		background: #F5F5F5;
		border-radius: 5upx;
		align-items: center;
		justify-content: center;
	}

	.htlist {
		position: absolute;
		width: 100%;
		background-color: #FFFFFF;
		top: 350upx;
		z-index: 66;

		.listq {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			padding: 20upx;

			text {
				padding-top: 20upx;
			}
		}
	}

	.contents {
		width: 100%;
		// height: 505upx;
		background-color: #FFFFFF;
		padding: 30upx;
		margin-top: 20upx;

		.c-top {
			display: flex;
			border-bottom: 2upx solid #F5F5F5;
			padding-bottom: 30upx;

			.nr {
				padding-left: 20upx;
				width: 400upx;
			}
		}

		.color {
			padding-top: 10upx;
			display: flex;
			flex-direction: column;
		}
	}

	.nav-a {
		width: 100%;

		.list {
			width: 100%;
			height: 89upx;
			padding: 30upx;
			background-color: #fff;
			border-bottom: 2upx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}
	}

	.active {
		width: 690upx;
		height: 80upx;
		background: linear-gradient(90deg, #FF5C5C, #FF3D3D);
		text-align: center;
		line-height: 80upx;
		border-radius: 10upx;
		color: #FFFFFF;
	}

	.content {
		width: 100%;
		padding-bottom: 50upx;
	}

	.jiu {
		font-size: 34upx;
		color: #999999;
		padding-right: 10upx;
	}

	.top {
		width: 100%;
		// height: 618upx;
		margin-top: 20upx;

		.lists {
			width: 100%;
			padding: 30upx;
			position: relative;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			height: 350upx;
			align-items: flex-start;
			justify-content: space-around;
			color: #666;
			font-size: 32upx;
			margin-top: 20upx;
		}

		.list {
			width: 100%;
			padding: 30upx;
			background-color: #FFFFFF;
			height: 88upx;
			border-bottom: 2upx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666;
			font-size: 32upx;

			uni-input {
				width: 350upx;
				color: #999999;
				text-align: right;
				padding-right: 10px;
			}
		}
	}

	.nav {
		width: 750upx;
		height: 400upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
	}

	.shipin {
		width: 100%;
		height: 400upx;
		background-color: #fff;
		margin-top: 5upx;

		.pp {
			width: 350upx;
			height: 500upx;
			background-color: #F5F5F5;
			margin-left: 20upx;
		}
	}

	.bottom {
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		z-index: 99;
		align-items: center;

		.btn {
			width: 690upx;
			height: 80upx;
			background-color: #FA3534;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			color: #fff;
		}

		.btns {
			width: 690upx;
			height: 80upx;
			background: #F5F5F5;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			color: #999999;
		}
	}
</style>
